<template>
  <view style="height: 100vh; background: #fff">
    <image class="bg" src="../../static/home/bg.png" mode="aspectFill" />
    <u-navbar title="AI智能抠图" bgColor="rgba(0,0,0,0)" auto-back></u-navbar>
    <view class="con">
      <view class="box">
        <image :src="info.url" @click="TanPreviewImage([info.url], 1)" style="width: 450rpx; height: 450rpx; margin-bottom: 20rpx" mode="aspectFill" />
        <image :src="info.resUrl" @click="TanPreviewImage([info.resUrl], 1)" style="width: 450rpx; height: 450rpx" mode="aspectFill" />
      </view>
      <view class="btn">
        <u-button type="primary" shape="circle" icon="download" @click="downLoadFn">下载图片</u-button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useFilesStore } from "@/stores/files";
import { TanPreviewImage } from "@/utils/commonFn";

const info = useFilesStore().videoInfo;
const downLoadFn = () => {
  uni.downloadFile({
    url: info.resUrl, //分享的图片的链接
    success: (res) => {
      uni.getFileSystemManager().saveFile({
        tempFilePath: res.tempFilePath,
        success(res) {
          //保存图片
          uni.saveImageToPhotosAlbum({
            filePath: res.savedFilePath,
          });
          uni.showToast({
            title: "图片已保存到相册",
            icon: "success",
            duration: 2000,
          });
        },
      });
    },
    complete() {
      //隐藏loading
      uni.hideLoading();
    },
    fail(err) {
      console.log(err, "shareImg");
    },
  });
};
</script>
<style lang="less" scoped>
.bg {
  width: 100%;
  height: 1362rpx;
  position: absolute;
  left: 0;
  z-index: 1;
}
.con {
  position: relative;
  padding: 0 30rpx;
  z-index: 2;
  padding-top: 190rpx;
  .box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn {
    box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(100, 73, 218, 0.3);
    width: 400rpx;
    margin: 90rpx auto;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
  }
  .sub {
    font-size: 28rpx;
    color: #3d3d3d;
    margin-top: 28rpx;
    text {
      background: rgba(59, 112, 253, 0.17);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 26rpx;
      color: #ffffff;
      padding: 0 10rpx;
    }
  }
}
</style>
